import styled from 'styled-components';
import React, { CSSProperties, ReactNode, useCallback, useEffect, useState } from 'react';
import { Button, Select } from 'antd';
import {
    ProFormText,
    ProFormSelect,
    ProFormTextArea,
    ProFormGroup,
    ProFormItem
} from '@ant-design/pro-components';
import { ApplicationCategory, appstoreCategoriesList2value, appstoreCategoriesValue2list, appstoreGetCategories } from '@/services';

const STORAGE_TYPES = [{
    identifier: 'mysql',
    name: 'MySQL',
}, {
    identifier: 'sqlite',
    name: 'SQLite',
}]

export interface ProFormCategoriesSelectProps {
    name: string;
    label: string;
}

export const ProFormCategoriesSelect: React.FC<ProFormCategoriesSelectProps> = (props) => {

    const [categories, setCategories] = useState<Array<ApplicationCategory>>([]);

    useEffect(() => {
        // appstoreGetCategories
        appstoreGetCategories().then((data) => {
            setCategories(data);
        });
    }, []);

    return (
        <ProFormItem label={props.label} shouldUpdate>
            {(form) => {
                return (
                    <Select
                        style={{ width: '300px' }}
                        mode="multiple"
                        value={appstoreCategoriesValue2list(form?.getFieldValue(props.name))}
                        onChange={(value) => {
                            console.log(value, form.getFieldValue(props.name));
                            form?.setFieldValue(props.name, appstoreCategoriesList2value(value))
                        }}
                        options={categories.map((item, index) => {
                            return {
                                value: item.code + '',
                                label: item.name
                            };
                        })} />
                );
            }}
        </ProFormItem >
    );
}


const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
`;

const OptionContainer = styled.div`
    width: 100%;
    padding:0 10px;
    margin:0 auto;
`;